<template>
  <div class="front-view">
    <!-- 轮播图区域 -->
    <section class="carousel-section">
      <div class="section-header">
        <h1>专业法律服务平台</h1>
        <p>全方位满足您的法律需求</p>
      </div>
      <el-carousel :interval="5000" indicator-position="outside" height="400px">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <div
            class="carousel-item"
            :style="{
              background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${item.image}) center/cover`,
            }"
          >
            <div class="carousel-content">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 英雄区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">专业法律支援，触手可及</h1>
        <p class="hero-subtitle">在线咨询、专业律师、法律文书、案件管理一站式解决方案</p>
        <div class="hero-actions">
          <el-button type="primary" size="large" class="consult-btn">
            <el-icon><ChatDotRound /></el-icon>立即咨询
          </el-button>
          <el-button size="large" class="learn-more-btn">
            了解更多 <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>
      <div class="hero-image">
        <img
          src="https://img.freepik.com/free-vector/lawyer-concept-illustration_114360-7478.jpg"
          alt="法律支援"
        />
      </div>
    </section>

    <!-- 服务特色 -->
    <section class="features-section">
      <div class="section-header">
        <h2>我们的服务特色</h2>
        <p>专业、高效、便捷的法律服务体验</p>
      </div>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <h3>7×24小时在线</h3>
          <p>全天候法律咨询服务，随时解答您的法律问题</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <el-icon><User /></el-icon>
          </div>
          <h3>专业律师团队</h3>
          <p>数百名执业律师，覆盖民事、刑事、商事等多个领域</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <el-icon><Document /></el-icon>
          </div>
          <h3>智能法律文书</h3>
          <p>一键生成各类法律文书，专业规范又省时</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <el-icon><Lock /></el-icon>
          </div>
          <h3>隐私安全保障</h3>
          <p>端到端加密通信，确保您的案件信息绝对安全</p>
        </div>
      </div>
    </section>

    <!-- 服务流程 -->
    <section class="process-section">
      <div class="section-header">
        <h2>简单四步，解决法律问题</h2>
        <p>清晰透明的服务流程，让法律咨询变得简单</p>
      </div>
      <div class="process-steps">
        <div class="process-step">
          <div class="step-number">1</div>
          <h3>描述问题</h3>
          <p>在线提交您的法律问题或需求</p>
        </div>
        <div class="process-step">
          <div class="step-number">2</div>
          <h3>匹配律师</h3>
          <p>系统为您匹配最合适的专业律师</p>
        </div>
        <div class="process-step">
          <div class="step-number">3</div>
          <h3>咨询解答</h3>
          <p>律师提供专业解答或解决方案</p>
        </div>
        <div class="process-step">
          <div class="step-number">4</div>
          <h3>问题解决</h3>
          <p>获得满意的法律问题解决方案</p>
        </div>
      </div>
    </section>

    <!-- 律师团队展示 -->
    <section class="lawyers-section">
      <div class="section-header">
        <h2>专业律师团队</h2>
        <p>经验丰富、专业可靠的执业律师</p>
      </div>
      <div class="lawyers-grid">
        <div class="lawyer-card">
          <div class="lawyer-avatar">
            <el-avatar
              :size="100"
              src="https://img.freepik.com/free-photo/portrait-successful-lawyer-standing-office_1098-19881.jpg"
            />
          </div>
          <h3>张伟明律师</h3>
          <p class="lawyer-specialty">民事纠纷 · 婚姻家庭</p>
          <p class="lawyer-exp">执业12年 · 处理案件356起</p>
          <div class="lawyer-rating">
            <el-rate v-model="value" disabled show-score text-color="#ff9900" />
          </div>
          <el-button type="primary" class="consult-lawyer-btn">咨询律师</el-button>
        </div>
        <div class="lawyer-card">
          <div class="lawyer-avatar">
            <el-avatar
              :size="100"
              src="https://img.freepik.com/free-photo/portrait-confident-female-lawyer_1098-19880.jpg"
            />
          </div>
          <h3>李静律师</h3>
          <p class="lawyer-specialty">刑事辩护 · 公司法务</p>
          <p class="lawyer-exp">执业8年 · 处理案件218起</p>
          <div class="lawyer-rating">
            <el-rate v-model="value" disabled show-score text-color="#ff9900" />
          </div>
          <el-button type="primary" class="consult-lawyer-btn">咨询律师</el-button>
        </div>
        <div class="lawyer-card">
          <div class="lawyer-avatar">
            <el-avatar
              :size="100"
              src="https://img.freepik.com/free-photo/portrait-middle-aged-male-lawyer_1098-19882.jpg"
            />
          </div>
          <h3>王建国律师</h3>
          <p class="lawyer-specialty">合同纠纷 · 知识产权</p>
          <p class="lawyer-exp">执业15年 · 处理案件512起</p>
          <div class="lawyer-rating">
            <el-rate v-model="value" disabled show-score text-color="#ff9900" />
          </div>
          <el-button type="primary" class="consult-lawyer-btn">咨询律师</el-button>
        </div>
      </div>
      <div class="section-actions">
        <el-button type="primary" size="large">查看全部律师</el-button>
      </div>
    </section>

    <!-- 成功案例 -->
    <section class="cases-section">
      <div class="section-header">
        <h2>成功案例</h2>
        <p>我们帮助客户解决的各种法律问题</p>
      </div>
      <div class="cases-grid">
        <div class="case-card">
          <div class="case-type">民事纠纷</div>
          <h3>房屋买卖合同纠纷案</h3>
          <p>帮助客户成功解除不公平购房合同，追回全部定金35万元</p>
          <div class="case-result">
            <span class="result-badge">胜诉</span>
            <span class="case-duration">处理时长: 45天</span>
          </div>
        </div>
        <div class="case-card">
          <div class="case-type">劳动争议</div>
          <h3>公司违法解除劳动合同案</h3>
          <p>帮助劳动者获得违法解除劳动合同赔偿金及加班费共计28万元</p>
          <div class="case-result">
            <span class="result-badge">胜诉</span>
            <span class="case-duration">处理时长: 30天</span>
          </div>
        </div>
        <div class="case-card">
          <div class="case-type">知识产权</div>
          <h3>商标侵权纠纷案</h3>
          <p>成功维护企业商标权益，制止侵权行为并获得经济赔偿50万元</p>
          <div class="case-result">
            <span class="result-badge">胜诉</span>
            <span class="case-duration">处理时长: 60天</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 用户评价 -->
    <section class="testimonials-section">
      <div class="section-header">
        <h2>用户评价</h2>
        <p>来自真实用户的反馈</p>
      </div>
      <div class="testimonials-grid">
        <div class="testimonial-card">
          <div class="testimonial-content">
            <p>"非常感谢平台律师的专业帮助，解决了困扰我多年的房产继承问题，服务非常周到！"</p>
          </div>
          <div class="testimonial-author">
            <el-avatar
              :size="50"
              src="https://img.freepik.com/free-photo/portrait-young-businessman_1098-19883.jpg"
            />
            <div class="author-info">
              <h4>李先生</h4>
              <p>房产纠纷咨询</p>
            </div>
          </div>
        </div>
        <div class="testimonial-card">
          <div class="testimonial-content">
            <p>
              "公司遇到合同纠纷，通过平台找到了专业律师，不仅解决了问题，还给了很多预防风险的建议。"
            </p>
          </div>
          <div class="testimonial-author">
            <el-avatar
              :size="50"
              src="https://img.freepik.com/free-photo/portrait-confident-businesswoman_1098-19884.jpg"
            />
            <div class="author-info">
              <h4>张女士</h4>
              <p>企业法律顾问</p>
            </div>
          </div>
        </div>
        <div class="testimonial-card">
          <div class="testimonial-content">
            <p>
              "半夜遇到紧急法律问题，没想到还能找到律师咨询，响应速度很快，解答也很专业，非常感激！"
            </p>
          </div>
          <div class="testimonial-author">
            <el-avatar
              :size="50"
              src="https://img.freepik.com/free-photo/portrait-young-woman_1098-19885.jpg"
            />
            <div class="author-info">
              <h4>王小姐</h4>
              <p>刑事咨询</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 行动召唤 -->
    <section class="cta-section">
      <div class="cta-content">
        <h2>遇到法律问题？让我们帮助您</h2>
        <p>专业律师团队为您提供一对一解决方案</p>
        <el-button type="primary" size="large" class="cta-button">
          <el-icon><ChatDotRound /></el-icon>立即咨询
        </el-button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ChatDotRound, ArrowRight, Clock, User, Document, Lock } from '@element-plus/icons-vue'

const value = ref(4.7)

// 轮播图数据
const carouselItems = ref([
  {
    title: '新用户专享优惠',
    description: '首次咨询享受8折优惠，专业律师为您提供一对一服务',
    image:
      'https://img1.baidu.com/it/u=2919380713,615567869&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  },
  {
    title: '企业法务套餐',
    description: '专为企业设计的全年法律顾问服务，防范风险于未然',
    image:
      'https://img.freepik.com/free-photo/business-people-shaking-hands-office_53876-13391.jpg',
  },
  {
    title: '智能法律文档生成',
    description: '一键生成各类法律文书，省时省力又专业',
    image: 'https://img.freepik.com/free-photo/contract-signing-business-agreement_53876-13392.jpg',
  },
  {
    title: '成功案例分享',
    description: '查看我们最近帮助客户解决的典型案例',
    image:
      'https://img0.baidu.com/it/u=2793346599,3408305549&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  },
])
</script>

<style scoped>
.front-view {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

/* 英雄区域样式 */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 5%;
  background: linear-gradient(135deg, #1a3a5f 0%, #2c5282 100%);
  color: white;
  min-height: 500px;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(to right, #ffd700, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #e6e6e6;
}

.hero-actions {
  display: flex;
  gap: 15px;
}

.consult-btn {
  background-color: #ffd700;
  border-color: #ffd700;
  color: #1a3a5f;
  font-weight: bold;
}

.consult-btn:hover {
  background-color: #e6c300;
  border-color: #e6c300;
}

.learn-more-btn {
  background-color: transparent;
  border-color: #ffd700;
  color: #ffd700;
}

.learn-more-btn:hover {
  background-color: rgba(255, 215, 0, 0.1);
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 轮播图样式 */
.carousel-section {
  padding: 60px 5%;
  background-color: #f9fafb;
}

.carousel-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  border-radius: 8px;
}

.carousel-content {
  max-width: 700px;
  padding: 0 20px;
}

.carousel-content h3 {
  color: #f9fafb;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.carousel-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* 通用部分标题样式 */
.section-header {
  text-align: center;
  margin-bottom: 50px;
  padding: 0 20px;
}

.section-header h1 {
  font-size: 2rem;
  color: #1a3a5f;
  margin: 15px 0 10px;
  font-weight: 700;
}

.section-header p {
  font-size: 1.1rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

/* 服务特色样式 */
.features-section {
  padding: 80px 5%;
  background-color: #f9fafb;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #1a3a5f 0%, #2c5282 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  font-size: 28px;
}

.feature-card h3 {
  font-size: 1.5rem;
  color: #1a3a5f;
  margin-bottom: 15px;
}

.feature-card p {
  color: #666;
}

/* 服务流程样式 */
.process-section {
  padding: 80px 5%;
  background-color: white;
}

.process-steps {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #ffd700;
  z-index: 1;
}

.process-step {
  text-align: center;
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 0 15px;
}

.step-number {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #1a3a5f 0%, #2c5282 100%);
  color: #ffd700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  border: 4px solid white;
  box-shadow: 0 0 0 4px #ffd700;
}

.process-step h3 {
  font-size: 1.3rem;
  color: #1a3a5f;
  margin-bottom: 10px;
}

.process-step p {
  color: #666;
}

/* 律师团队样式 */
.lawyers-section {
  padding: 80px 5%;
  background-color: #f9fafb;
}

.lawyers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto 50px;
}

.lawyer-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.lawyer-card:hover {
  transform: translateY(-5px);
}

.lawyer-avatar {
  margin-bottom: 20px;
}

.lawyer-card h3 {
  font-size: 1.4rem;
  color: #1a3a5f;
  margin-bottom: 10px;
}

.lawyer-specialty {
  color: #ffd700;
  font-weight: 500;
  margin-bottom: 8px;
}

.lawyer-exp {
  color: #666;
  margin-bottom: 15px;
}

.consult-lawyer-btn {
  background: linear-gradient(135deg, #1a3a5f 0%, #2c5282 100%);
  border: none;
  margin-top: 15px;
}

.consult-lawyer-btn:hover {
  opacity: 0.9;
}

.section-actions {
  text-align: center;
}

/* 成功案例样式 */
.cases-section {
  padding: 80px 5%;
  background-color: white;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.case-card {
  background: #f9fafb;
  padding: 25px;
  border-radius: 10px;
  border-left: 4px solid #1a3a5f;
  transition: transform 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.case-type {
  display: inline-block;
  background: #1a3a5f;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-bottom: 15px;
}

.case-card h3 {
  font-size: 1.3rem;
  color: #1a3a5f;
  margin-bottom: 15px;
}

.case-card p {
  color: #666;
  margin-bottom: 20px;
}

.case-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-badge {
  background: #ffd700;
  color: #1a3a5f;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9rem;
}

.case-duration {
  color: #666;
  font-size: 0.9rem;
}

/* 用户评价样式 */
.testimonials-section {
  padding: 80px 5%;
  background-color: #f9fafb;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.testimonial-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.testimonial-content {
  margin-bottom: 20px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
  font-style: italic;
  color: #555;
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.author-info {
  margin-left: 15px;
}

.author-info h4 {
  color: #1a3a5f;
  margin-bottom: 5px;
}

.author-info p {
  color: #666;
  font-size: 0.9rem;
}

/* 行动召唤样式 */
.cta-section {
  padding: 80px 5%;
  background: linear-gradient(135deg, #1a3a5f 0%, #2c5282 100%);
  color: white;
  text-align: center;
}

.cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.cta-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.cta-button {
  background-color: #ffd700;
  border-color: #ffd700;
  color: #1a3a5f;
  font-weight: bold;
  padding: 15px 30px;
  font-size: 1.1rem;
}

.cta-button:hover {
  background-color: #e6c300;
  border-color: #e6c300;
}
</style>
